<template>
  <div class="special">
    <my-header></my-header>
    <div class="container">
      <div class="top-img">
        <img src="/img/index/nav/lunbo3.webp" alt="" />
      </div>
      <div class="box">
        <div class="box-top">
          <div>
            <span
              style="
                border: 1px solid #8c222c;
                margin-left: 25px;
                padding: 0 5px 0 5px;
                color: #8c222c;
              "
              >专题</span
            >
          </div>
          <div style="color: #333; margin-left: 25px">古今中外</div>
        </div>
        <div class="box-bottom">
          <el-tabs
            tabPosition="left"
            style="height: 200px"
            class="box-bottom-left"
          >
            <el-tab-pane :label="item.title" v-for="(item,index) in splone" :key="index">
              <div class="zhongjian">
                <div class="box-img">
                  <div>
                    <router-link :to="`/detail/${item.id}`">
                    <img :src="item.img_small" alt="" style="width: 80%" />
                    </router-link>
                  </div>
                </div>
                <div class="box-text"
                style="margin-top:30px">
                  <div>{{item.title}}</div>
                  <div>作者：{{item.author}}</div>
                  <div>¥{{item.price}}</div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
          <div class="box-bottom-right">
            <div>读者书店</div>
            <div>信誉积分：468</div>
            <div>交易成功率：100.00%</div>
            <div>好评率：100.00 %</div>
          </div>
        </div>
      </div>
      <div class="box">
        <div class="box-top">
          <div>
            <span
              style="
                border: 1px solid #8c222c;
                margin-left: 25px;
                padding: 0 5px 0 5px;
                color: #8c222c;
              "
              >专题</span
            >
          </div>
          <div style="color: #333; margin-left: 25px">金庸武侠</div>
        </div>
        <div class="box-bottom">
          <el-tabs
            tabPosition="left"
            style="height: 200px"
            class="box-bottom-left"
          >
            <el-tab-pane v-for="(item,index) in spltwo" :key="index" :label="item.title">
              <div class="zhongjian">
                <div class="box-img">
                  <div>
                    <router-link :to="`/detail/${item.id}`">
                    <img :src="item.img_small" alt="" style="width: 80%" />
                    </router-link>
                  </div>
                </div>
                <div class="box-text"
                style="margin-top:30px">
                  <div>{{item.title}}</div>
                  <div>作者：{{item.author}}</div>
                  <div>¥{{item.price}}</div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
          <div class="box-bottom-right">
            <div>读者书店</div>
            <div>信誉积分：468</div>
            <div>交易成功率：100.00%</div>
            <div>好评率：100.00 %</div>
          </div>
        </div>
      </div>
      <div class="box">
        <div class="box-top">
          <div>
            <span
              style="
                border: 1px solid #8c222c;
                margin-left: 25px;
                padding: 0 5px 0 5px;
                color: #8c222c;
              "
              >专题</span
            >
          </div>
          <div style="color: #333; margin-left: 25px">儿童专区</div>
        </div>
        <div class="box-bottom">
          <el-tabs
            tabPosition="left"
            style="height: 200px"
            class="box-bottom-left"
          >
            <el-tab-pane 
            v-for="(item,index) in splthree" :key="index"
            :label="item.title">
              <div class="zhongjian">
                <div class="box-img">
                  <div>
                    <router-link :to="`/detail/${item.id}`">
                    <img :src="item.img_small" alt="" style="width: 80%" />
                    </router-link>
                  </div>
                </div>
                <div class="box-text"
                style="margin-top:30px">
                  <div>{{item.title}}</div>
                  <div>作者：{{item.author}}</div>
                  <div>¥{{item.price}}</div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
          <div class="box-bottom-right">
            <div>读者书店</div>
            <div>信誉积分：468</div>
            <div>交易成功率：100.00%</div>
            <div>好评率：100.00 %</div>
          </div>
        </div>
      </div>
    </div>
    <my-footer style="margin-top:50px;"></my-footer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      splone:[],
      spltwo:[],
      splthree:[]
    };
  },
  mounted(){
    this.axios.get('/booksplone').then(result=>{
      console.log(result.data)
      this.splone=result.data
    });
    this.axios.get('/bookspltwo').then(result=>{
      console.log(result.data)
      this.spltwo=result.data
    });
    this.axios.get('/booksplthree').then(result=>{
      console.log(result.data)
      this.splthree=result.data
    });
  }
};
</script>
<style>
.special .container {
  max-width: 1200px;
  min-width: 1200px;
  margin: 0 auto;
}
.special .container .top-img {
  width: 1200px;
}
.special .container .top-img > img {
  width: 100%;
}
.special .container .box {
  border: 1px solid #ccc;
  background-color: #f9f7f4;
  margin-top: 50px;
}
.special .container .box .box-top {
  height: 50px;
  display: flex;
  border-bottom: 1px solid #ccc;
  line-height: 50px;
}
.special .el-tabs__item {
  font-size: 20px;
}
.special .el-tabs__item.is-active {
  color: #8c222c;
}
.special .el-tabs__item:hover {
  color: #8c222c;
}
.special .el-tabs__active-bar {
  background-color: #8c222c;
}
.special .container .box-bottom {
  display: flex;
}
.special .container .box .box-bottom-left {
  width: 900px;
}
.special .container .box .box-bottom-right {
  width: 298px;
  border-left: 1px solid #ccc;
  text-align: left;
}
.special .container .box .box-bottom-right > div {
  margin-left: 50px;
  margin-top: 25px;
  color: #666666;
}
.special .container .box .box-bottom-left .box-img {
  width: 300px;
  height: 180px;
  margin-top: 10px;
}
.special .zhongjian{
  display: flex;
  text-align: left;
  margin-left: 50px;
  line-height: 30px;
}

</style>